<template>
  <mapgis-web-map
      crs="EPSG:3857"
      :center="[125.3,43.85]"
      :zoom="10"
    >    

    <!-- 基础底图-天地图（矢量）@Web墨卡托 -->
    <mapgis-rastertile-layer
      layerId="tdt-vec_w"
      url="http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
    />
    <!-- 基础底图-天地图（矢量注记）@Web墨卡托3857 -->
    <mapgis-rastertile-layer
      layerId="tdt-cva_w"
      url="http://t0.tianditu.com/DataServer?T=cva_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
    />

    <!-- 基础底图-天地图（影像）@Web墨卡托3857 -->
    <mapgis-rastertile-layer
      layerId="tdt-img_w"
      url="http://t0.tianditu.com/DataServer?T=img_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
    />
    <!-- 基础底图-天地图（影像注记）@Web墨卡托3857 -->
    <!-- <mapgis-rastertile-layer
      layerId="tdt-cia_w"
      url="http://t0.tianditu.com/DataServer?T=cia_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
    /> -->

    <!-- 基础底图-吉林一号切片影像 @Web墨卡托3857 -->
    <mapgis-rastertile-layer
        layerId="myDiTu_jl1"
        url="https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=73ad26c4aa6957eef051ecc5a15308b4&tk=3eaf089e32d2ecfd0eabc53543b8610e&sch=wmts"
    />
     <!-- 基础底图-天地图（影像注记）@Web墨卡托3857 -->
     <mapgis-rastertile-layer
      layerId="tdt-cia_w"
      url="http://t0.tianditu.com/DataServer?T=cia_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
    />

    <!-- 导航控件 -->
    <mapgis-navigation showCompass showZoom />

    <!-- 比例尺(自定义) -->
    <mapgis-custom-scale
      :outStyle='{"position":"absolute","zIndex":900,"left":"10px","bottom":"10px","maxHeight":"300px","width":"220px"}'
    />

    <!-- 全屏 -->
    <mapgis-fullscreen position="top-right" />

    <!-- 鹰眼 -->
    <mapgis-hawkeye />


    <!-- 量测工具(高级模式) -->
    <div class="measure-story-control">
      <mapgis-measure enableControl isAdvanceControl></mapgis-measure>
    </div>

    
    <!-- 地图状态栏（使用自定义模式） -->
    <div class="my-map-state">
        <!-- <mapgis-state :default="true" scale level lng lat /> -->
        <mapgis-state :default="false">
          <template v-slot:default="{state}">
            <mapgis-ui-input-group size="default" class="mapgis-test-2d-statebar">
              <mapgis-ui-input addon-before="级别" :value="state.level"/>
              <mapgis-ui-input addon-before="比例尺" :value="state.scale"/>
              <mapgis-ui-input addon-before="经度" :value="state.lng" />
              <mapgis-ui-input addon-before="纬度" :value="state.lat"/>
            </mapgis-ui-input-group>
          </template>
        </mapgis-state>
    </div>

    <!-- 地图打印控件 -->
    <mapgis-ui-collapse-card
      :outStyle='{"position":"absolute","zIndex":700,"right":"20px","top":"20px","width":"300px"}'
      position="top-right"
      title="打印"
    >
      <!-- <vue-component-491-AIcon slot="icon-hiden" :spin="false">
        <use xlink:href="#mapgis-huizhi1" />
      </vue-component-491-AIcon> -->
      <div slot="title">
        <span class="mapgis-custom-scale-card-title">绘制</span>
      </div>
      <!-- <div slot="extra">
        <vue-component-491-AIcon :spin="false">
          <use xlink:href="#mapgis-huizhi1" />
        </vue-component-491-AIcon>
      </div> -->
      <mapgis-print delay :delayTime="1000" />
    </mapgis-ui-collapse-card>

    <mapgis-ui-card class="mapgis-test-custom-scale">
      <mapgis-custom-scale />
    </mapgis-ui-card>
    <mapgis-ui-card class="mapgis-test-custom-legend">
      <mapgis-mvt-legend
        :column="1"
        :outStyle='{"position":"absolute","zIndex":900,"right":"5px","bottom":"10px","maxHeight":"300px","width":"260px"}'
      />
    </mapgis-ui-card>


    <!-- 地图属性说明小提示 -->
    <mapgis-attribution
        position="bottom-left"
        compact
        customAttribution="这里显示内容-二维属性组件"
    />

    <!-- Marker图形标注 -->
    <mapgis-marker
        :offset="[20,20]"
        :coordinates="[110,30]"
        color="#37495E"
        anchor="center"
        :draggable="false"
    />

    <!-- 要素编辑工具 -->
    <mapgis-draw enableControl />

    

    <!-- 数据输入：查询框 -->
    <mapgis-ui-input-search
        placeholder="请输入要搜索的查询内容"        
        enterButton="查询"
    />
    <!-- loading="" -->

    <!-- 数据输入：下拉选择器(分组类型) -->
    <mapgis-ui-select defaultValue="武汉" autoWidth enterButton="查询">
      <mapgis-ui-select-opt-group>
        <span slot="label">湖北省</span>
        <mapgis-ui-select-option value="黄冈">黄冈</mapgis-ui-select-option>
        <mapgis-ui-select-option value="武汉">武汉</mapgis-ui-select-option>
      </mapgis-ui-select-opt-group>
      <mapgis-ui-select-opt-group label="浙江省">
        <mapgis-ui-select-option value="杭州">杭州</mapgis-ui-select-option>
      </mapgis-ui-select-opt-group>
    </mapgis-ui-select> 
    
    

  </mapgis-web-map>
</template>

<script>
// import { defineComponent } from '@vue/composition-api'

// export default defineComponent({
//     setup() {
        
//     },
// })
</script>

<style scoped>
.measure-story-control {
    position: absolute;
    top: 30px;
    right: 30px;

    z-index: 9;
    background: aliceblue;
    border-radius: 10px;
}

.my-map-state {
    position: fixed;
    bottom: 10px;
    left: 20%;
    /* right: 10px; */
    /* margin: auto 0; */
    /* right: 10px; */
    z-index: 9;
    background: aliceblue;
    /* border-radius: 10px; */
    /* height: 120px; */
    /* width: 99%; */
}
.mapgis-ui-input-group-wrapper {
    display: inline-block;
    width: 220px !important;
    text-align: start;
    vertical-align: top;
}

</style>
